<script setup lang="ts">
import SokachGuess from '@/components/sokach-guess.vue'
import { getHomeGoodsGuessLikeAPI } from '@/services/home'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
// 获取页面参数
const query = defineProps<{
  id: string
}>()

//获取猜你喜欢数据
const pageParams = ref({ page: 1, pageSize: 10 }) //页码
const resPages = ref(0) //总页码
const homeGoodsGuessLikeList = ref([])
const getHomeGoodsGuessLikeData = async () => {
  const res = await getHomeGoodsGuessLikeAPI(pageParams.value)
  homeGoodsGuessLikeList.value = [...homeGoodsGuessLikeList.value, ...res.result.items]
  resPages.value = res.result.pages
}

//标记数据结束 trur表示数据已全部完成加载
const finish = ref(false)

//上拉事件
const onScrolltolower = () => {
  //先进行数据判断是否全部数据已加载完成
  if (finish.value === true) {
    return uni.showToast({ icon: 'none', title: '已没有更多数据' })
  }

  //分页添加条件
  if (pageParams.value.page < resPages.value) {
    //页码+1
    pageParams.value.page++

    //请求数据
    getHomeGoodsGuessLikeData()
  } else {
    finish.value = true
    console.log('没有数据了')
  }
}

onLoad(() => {
  getHomeGoodsGuessLikeData()
})
</script>

<template>
  <scroll-view class="viewport" scroll-y @scrolltolower="onScrolltolower">
    <!-- 订单状态 -->
    <view class="overview">
      <view class="status icon-checked">支付成功</view>
      <view class="buttons">
        <navigator
          hover-class="none"
          class="button navigator"
          url="/pages/index/index"
          open-type="switchTab"
        >
          返回首页
        </navigator>
        <navigator
          hover-class="none"
          class="button navigator"
          :url="`/pagesOrder/detail/detail?id=${query.id}`"
          open-type="redirect"
        >
          查看订单
        </navigator>
      </view>
    </view>

    <!-- 猜你喜欢 -->
    <SokachGuess :list="homeGoodsGuessLikeList" :finish="finish"></SokachGuess>
  </scroll-view>
</template>

<style lang="scss">
page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.viewport {
  background-color: #f7f7f8;
}

.overview {
  line-height: 1;
  padding: 50rpx 0;
  color: #fff;
  background-color: #27ba9b;

  .status {
    font-size: 36rpx;
    font-weight: 500;
    text-align: center;
  }

  .status::before {
    display: block;
    font-size: 110rpx;
    margin-bottom: 20rpx;
  }

  .buttons {
    height: 60rpx;
    line-height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60rpx;
  }

  .button {
    text-align: center;
    margin: 0 10rpx;
    font-size: 28rpx;
    color: #fff;

    &:first-child {
      width: 200rpx;
      border-radius: 64rpx;
      border: 1rpx solid #fff;
    }
  }
}
</style>
